<template>
  <div class="professionBaseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>专业基本信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="mb-5 float-right clearfix">
      <el-button-group>
        <el-button type="primary" @click="toNewProfessionBaseInfo">新增专业</el-button>
        <div class="el-button el-button--primary" @click="upload">
          <span>导入数据</span>
          <input ref="upload" type="file" name="file" class="none">
        </div>
        <el-button type="primary" @click.native.prevent="downloadFile">导出数据</el-button>
        <el-button type="primary" @click.native.prevent="printInfo">打印</el-button>
      </el-button-group>
    </div>

    <el-table
      :data="professionTable"
      style="width: 100%">
      <el-table-column
        prop="majorId"
        label="专业编号"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="majorName"
        label="专业名称"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="majorShortName"
        label="专业简称"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="majorSort"
        label="学科门类"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="teachingDirector"
        label="教研室主任"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="majorManager"
        label="学科负责人"
        min-width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="120">
        <template scope="scope">
          <el-button icon="edit" type="text" @click="fixRow(scope.row.majorId)"></el-button>
          <el-button icon="delete" type="text"
                     @click="deleteRow(scope.$index,professionTable,scope.row.majorId)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'professionBaseInfo',
    data(){
      return {
        professionTable: [],
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 40,
        currentPage: 1
      }
    },
    components: {},
    mounted: function () {
      this.$nextTick(function () {
        this.searchRes();
      })
    },
    methods: {
      //page
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.searchRes();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.searchRes();
      },
      //fix base info
      fixRow(majorId){
        this.$router.push({name: 'ProfessionBaseInfoFix', params: {majorId: majorId}})
      },

      //delete table rows
      deleteRow(index, rows, majorId) {
        this.deleteRes(majorId);
        rows.splice(index, 1);
      },

      deleteRes: function (majorId) {
        this.$http.get(this.$until.url + '/majorBaseInfo/deleteMajor',
          {
            params: {
              majorId: majorId
            }
          }
        ).then(response => {
          //console.log(response.body.message);
          this.searchRes();
          this.$message({
            type: 'success',
            message: response.body.message
          });
        }, response => {
          this.$message.error('删除失败');
        });
      },
      searchRes: function () {
        this.$http.get(this.$until.url + '/majorBaseInfo/getMajor',
          {
            params: {
              page: this.currentPage,
              pageSize: this.pageSize
            }
          }).then(response => {
          // total list for table
          this.total = response.body.countNum;
          this.professionTable = response.body.majorList
        }, response => {
          alert("找不到文件searchRes");
        });
      },
      toNewProfessionBaseInfo(){
        this.$router.push({path: 'NewProfessionBaseInfo'})
      },
      upload(){
        var file = this.$refs.upload
        file.click();
        file.onchange = () => {
          var fd = new FormData();
          fd.append('file', file.files[0]);
          this.uploadFile(fd)
        }
      },
      uploadFile(fd){
        this.$http.post(this.$until.url + '/majorBaseInfo/importMajor', fd).then((res) => {
          this.searchRes();
          this.$message({
            message: '文件上传成功',
            type: 'success'
          });
        }, (err) => {
          this.$message.error('文件上传失败');
        });
      },
      downloadFile(){
        this.$http.get(`${this.$until.url}/majorBaseInfo/exportMajor`).then((res) => {
          var url = res.body.message
          try {
            var elemIF = document.createElement("iframe");
            elemIF.src = url;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
          }
        }, (err) => {

        })
      },
      printInfo(){
        window.open(this.$until.url+'/ReportServer?reportlet=printMajor.cpt&collegeID=')
      }
    }
  }
</script>
